import 'package:flutter/material.dart';

/// GestureDetector是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。
/// GestureDetector实际上是指针事件的语义化封装，接下来我们详细介绍一下各种手势识别。
class GestureDetectorWidget extends StatefulWidget {
  final String? title;

  GestureDetectorWidget({this.title}) : super();

  @override
  State<StatefulWidget> createState() {
    return _GestureDetectorTestRouteState();
  }
}

class _GestureDetectorTestRouteState extends State<GestureDetectorWidget> {
  String _operation = "请单击"; //保存事件名
  double _top = 200; //距顶部的偏移
  double _left = 0.0; //距左边的偏移
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title??""),
        ),
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.only(top: 15),
          child: Column(
            children: [
              Container(
                child: GestureDetector(
                  child: Container(
                    alignment: Alignment.center,
                    color: Colors.blue,
                    width: 200.0,
                    height: 100.0,
                    child: Text(
                      _operation,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                  onTap: () => updateText("请双击"), //点击
                  onDoubleTap: () => updateText("请长按"), //双击
                  onLongPress: () => updateText("请单击"), //长按
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Stack(
                children: <Widget>[
                  Positioned(
                    width: 50,
                    height: 50,
                    top: _top,
                    left: _left,
                    child: GestureDetector(
                      child: CircleAvatar(child: Text("A")),
                      //手指按下时会触发此回调
                      onPanDown: (DragDownDetails e) {
                        //打印手指按下的位置(相对于屏幕)
                        print("用户手指按下：${e.globalPosition}");
                      },
                      //手指滑动时会触发此回调
                      onPanUpdate: (DragUpdateDetails e) {
                        //用户手指滑动时，更新偏移，重新构建
                        setState(() {
                          _left += e.delta.dx;
                          _top += e.delta.dy;
                        });
                      },
                      onPanEnd: (DragEndDetails e) {
                        //打印滑动结束时在x、y轴上的速度
                        print(e.velocity);
                      },
                    ),
                  )
                ],
              ),
            ],
          ),
        ));
  }

  @override
  void initState() {
    super.initState();
  }

  updateText(String s) {
    setState(() {
      _operation = s;
    });
  }
}
